<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue</title>
  </head>
  <script src="./vue.js"></script>

  <body>
    <!-- 模板 -->
    <div id="example">
      <!-- input -->
      <!-- <input v-model="searchText">

      <input
        v-bind:value="searchText"
        v-on:input="searchText = $event.target.value"
      > -->

      <custom-input v-model="searchText" placeholder="请输入"></custom-input>

      <!-- <custom-input
        v-bind:value="searchText"
        v-on:input="(payload) => searchText = payload"
      ></custom-input>

      <custom-input
        v-bind:value="searchText"
        v-on:input="searchText = $event"
      ></custom-input> -->

      <!-- checkbox -->
      <!-- <input type="checkbox" v-model="checked">

      <input type="checkbox" v-bind:checked="checked" v-on:change="checked = $event.target.checked">

      <custom-checkbox v-model="checked"></custom-checkbox>

      <custom-checkbox
        v-bind:checked="checked"
        v-on:change="(payload) => checked = $event"
      ></custom-checkbox>

      <custom-checkbox
        v-bind:checked="checked"
        v-on:change="checked = $event"
      ></custom-checkbox> -->
    </div>

    <script>
      // $props、$attrs和$listeners探究

      // $props：当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。
      // $attrs： 包含了父组件中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。 使用 v-bind="$attrs" 这些属性会可以直接绑定到非根元素上
      // $listeners：包含了父组件中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用

      Vue.component('custom-input', {
        props: ['value'],
        inheritAttrs: false, // 默认为true,继承所有的父组件中不作为 prop 被识别且获取的特性绑定 (class 和 style 除外)，作为普通的HTML特性应用在子组件的根元素上
        template: `
        <div>
          <input
            v-bind:value="value"
            v-bind="$attrs"
            v-on:input="$emit('input', $event.target.value)"
          >
        </div>
      `
      })

      Vue.component('custom-checkbox', {
        model: {
          prop: 'checked',
          event: 'change' //要触发的事件
        },
        props: {
          checked: Boolean
        },
        template: `
        <input
          type="checkbox"
          v-bind:checked="checked"
          v-on:change="$emit('change', $event.target.checked)"
        >
      `
      })

      //vm实例
      var vm = new Vue({
        el: '#example',
        data: {
          searchText: '',
          checked: false
        }
      })
    </script>
  </body>
</html>
